<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
            color:#333;
        }
        ul li {
            background:white;
            padding:15px;
            margin-bottom:6px;
        }
        .top{
            overflow: hidden;
            margin-bottom:10px;
        }
        .title {
            font-size: 16px;
            /*height: 16px;*/
            line-height: 16px;
        }
        .summary {
            font-size: 11px;
            line-height: 11px;
            height: 11px;
            margin-top:9px;
            color:#999;
        }
        .left{
            float:left;
        }
        
        .btn {
            width:65px;
            height:13px;
            font-size: 13px;
            line-height: 13px;
            padding:8px 10px;
            display:block;
            text-align:center;
            color:white;
            border-radius:5px;
        }
        .red {
            background:#e62442;
        }
        dl dd{
            /*height:19px;*/
            line-height: 19px;
            font-size:14px;
            margin-bottom:4px;
        }
        dl dd:last-child{
            margin-bottom:-2px;
        }
        .merchant_address{
            background:url(../image/merchant_address.png) 0 0 no-repeat;
            background-size: 19px;
        }
        .client_address {
            background:url(../image/client_address.png) 0 0 no-repeat;
            background-size: 19px;
        }
        dl dd {
            padding-left: 25px;
        }
        .gray {
            color:#999;
        }
        .green {
            background:#1ad469;
        }
        .btn-list{
            /*display:flex;*/
            text-align:right;
            margin-top:14px;
        }
        .btn-list a {
            display:inline-block;
            width:68px;
            height:23px;
            line-height: 23px;
            text-align:center;
            border:1px solid #999;
            border-radius:5px;
        }
        .contact {
            color:#40afe2;
        }
        .route {
            color:#1abc5e;
        }
        .received {
            color:#e62442;
            border-color:#e62442 !important;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="top">
                <div class="left">
                    <div class="title">商家名称</div>
                    <div class="summary">
                        <span class="distance">距离<span class="d_number">0.43</span>km</span> | <span class="money">配送费RM <span class="m_number">5.6</span></span>
                    </div>
                </div>
            </div>
            <div class="bototm">
                <dl>
                    <dd class="merchant_address">
                        商家地址：XXXXXXXXXXX
                    </dd>
                    <dd class="client_address">
                        客户地址：xx商家地址x商家地址
                    </dd>
                    <dd class="gray">
                        联系电话：13411322212
                    </dd>
                    <dd class="gray">
                        珠海市香洲区翠香路233号安平大厦1301室
                    </dd>
                </dl>
                <div class="btn-list">
                    <a class="contact" href="javascript:;" onclick="" tapmode="">
                        联系
                    </a>
                    <a class="route" href="javascript:;" onclick="" tapmode="">
                        路线
                    </a>
                    <a class="received" href="javascript:;" onclick="" tapmode="">
                        确认收货
                    </a>
                </div>
            </div>
        </li>
        <li>
            <div class="top">
                <div class="left">
                    <div class="title">商家名称商家名称商家名称商家名称商家名称商家名称</div>
                    <div class="summary">
                        <span class="distance">距离<span class="d_number">0.43</span>km</span> | <span class="money">配送费 RM<span class="m_number">5.6</span></span>
                    </div>
                </div>
            </div>
            <div class="bototm">
                <dl>
                    <dd class="merchant_address">
                        商家地址：XXXXXXXXXXX
                    </dd>
                    <dd class="client_address">
                        客户地址：xx商家地址x商家地址
                    </dd>
                    <dd class="gray">
                        联系电话：13411322212
                    </dd>
                    <dd class="gray">
                        珠海市香洲区翠香路233号安平大厦1301室
                    </dd>
                </dl>
                <div class="btn-list">
                    <a class="contact" href="javascript:;" onclick="" tapmode="">
                        联系
                    </a>
                    <a class="route" href="javascript:;" onclick="" tapmode="">
                        路线
                    </a>
                    <a class="received" href="javascript:;" onclick="" tapmode="">
                        确认收货
                    </a>
                </div>
            </div>
        </li>
    </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function () {
        var titles = document.getElementsByClassName('title');
        for (var i = 0; i < titles.length; i++) {
            if (titles[i].offsetHeight > 16) {
                titles[i].style.lineHeight = '22px';
                titles[i].nextElementSibling.style.marginTop = '7px';
            }
        }
    }, false);
    apiready = function(){
        
    };
</script>
</html>